<template>
    <div class="stcMap">
      <div class="amap-page-container">
        <el-amap
          vid="amapDemo"
          :center="center"
          :zoom="zoom"
          class="amap-demo"
          :events="events">
        </el-amap>
        <div class="toolbar">
          position: [{{ lng }}, {{ lat }}] address: {{ address }}
        </div>
      </div>



    </div>
</template>

<script>

    export default {
        name: "stcMap",
      data() {
        let self = this;
        return {
          rentalDdetailsData:[],
          product_id:this.$route.query.product_id,
          address:'',
          zoom: 12,
          center: [121.59996, 31.197646],
          events: {
            click(e) {
              let { lng, lat } = e.lnglat;
              self.lng = lng;
              self.lat = lat;

              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });
              geocoder.getAddress([lng ,lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    self.address = result.regeocode.formattedAddress;
                    self.$nextTick();
                  }
                }
              });
            }
          },
          lng: 0,
          lat: 0

        };
      },
      components: {

      },
      mounted() {
        //注释注释
        this.getInitData();
      },
      methods: {
        //初始化页面
        async getInitData() {
          let params = {
            product_id: this.product_id,
          };
          const res = await this.$axios.post(this.$api.rentalDdetailsData, params);
          if (res.success) {
            this.rentalDdetailsData = res.data;
            this.rentalDdetailsData.forEach((i, index) => {
              if (typeof i.goods_spec_format == "string") {
                i.goods_spec_format = JSON.parse(i.goods_spec_format);
                this.address= i.goods_spec_format[0].province+i.goods_spec_format[0].city+i.goods_spec_format[0].country+i.goods_spec_format[0].other_address
                console.log('111',this.address)
              }
            });
          } else {
            this.rentalDdetailsData = [];
            this.$toast(res.msg);
          }
        },





      }
    }
</script>

<style scoped>
  .stcMap{width: 100%;height: 100vh;background-color: #fff;position: fixed;top:0;z-index: 100;}

  .amap-demo {
    width: 100%;
    height: 8rem;

  }
</style>
